<template>
  <el-button :type="btnType" :size="size" @click="openExceImportDialog">
    {{ name }}
    <v-dialog ref="exceImportDialog" :title="(filename || $route.meta.title) + '导入'" width="860px"
      :show-footer="showFooter" confirmBtnTxt="确定" :show-cancel="false" @handleClose="handleClose">
      <exce-import v-if="show" ref="exceImport" :action="action" :data="data" :auto-upload="false" :tip="tip" :type="type"
        :filename="filename" :template-download="temDownload" :template-refresh="tempRefresh" :refreshTemp="refreshTemp" @uploaded="uploaded" @checkHis="checkHis" :result="result"
        :detail-type="detailType">
        <div slot="result">
          <div style="min-height: 80px" v-if="!finished" v-loading="loading">
            <div v-if="!showRes">解析中...</div>
            <basic-table v-if="showRes" :columns="columns" :call-server="callServer" :before-show="beforeShow"
              v-model="tableParams" ref="basicTable" :muti="false">
              <div slot="tableHeader" class="">
                <v-form :fields="fields" :fieldsData="tableParams"> </v-form>
              </div>
            </basic-table>
            <el-row v-if="showRes">
              <el-col class="txt-right">
                <el-button :loading="posting" type="primary" @click="submit(false)">确认导入</el-button>
              </el-col>
            </el-row>
          </div>
          <div v-else-if="finished">
            导入成功：{{ successCount }} 条
            <el-row>
              <el-col class="txt-right">
                <el-button @click="$refs.exceImportDialog.close()">关闭</el-button>
              </el-col>
            </el-row>
          </div>
        </div>
      </exce-import>
      <slot v-else name="replace"></slot>
    </v-dialog>
    <v-dialog :show-footer="false" width="860px" ref="abnormalDialog" title="异常信息">
      <el-card shadow="never">
        <div slot="header" class="clearfix">
          行号{{ currentItem.rowNum }}
          <el-button @click="$refs.editDialog.dialogVisible = true" style="float: right" size="small" type="primary">修改
          </el-button>
        </div>
        <basic-table :columns="columns1" :props-data="currentItem.yiData" ref="basicTable1" :muti="false">
        </basic-table>
      </el-card>
    </v-dialog>
    <v-dialog :show-footer="false" width="960px" ref="hisDialog" :title="$route.meta.title + '导入历史'">
      <basic-table :columns="columns2" :call-server="callServer2" ref="basicTable2" :muti="false" v-model="tableParams2">
        <div slot="tableHeader" class="txt-right">
          <v-form :fields="fields3" :fieldsData="tableParams2">
            <el-col :span="4" class="txt-left">
              <el-button type="primary" @click="$refs.basicTable2.fecthData()">查询</el-button>
            </el-col>
          </v-form>
        </div>
      </basic-table>
    </v-dialog>
    <v-dialog confirmBtnTxt="确认导入" width="960px" ref="resultDialog" title="导入结果" @handleClose="handleClose1"
      :show-footer="currentItem.status != 1">
      <basic-table v-loading="loading3" v-if="showRes" :columns="columns" :call-server="callServer"
        :before-show="beforeShow" v-model="tableParams3" ref="basicTable3" :muti="false">
        <div slot="tableHeader" class="">
          <v-form :fields="fields4" :fieldsData="tableParams3">
          </v-form>
        </div>
      </basic-table>
    </v-dialog>
    <v-dialog @handleClose="saveItem" width="960px" ref="editDialog" :title="'第' + currentItem.rowNum + '行修改'">
      <v-form :label-width="160" ref="editForm" :fields="fields1" :fieldsData="auditForm"></v-form>
    </v-dialog>
    <v-dialog @handleClose="saveItem1" ref="confirmDialog" title="确认导入">
      <v-form ref="confirmForm" :fields="fields2" :fieldsData="confirmForm"></v-form>
    </v-dialog>
  </el-button>
</template>

<script>
import exceImport from "_c/exceImport/";
import {
  importTemplate,
  upload,
  progress,
  result,
  submit,
  titles,
  abnormal,
  remove,
  aduit,
  history,
  download,
  hisRemove,
  refresh
} from "@/api/excel2";
import basicTable from "_c/tables";
export default {
  model: {
    prop: "data",
  },
  components: {
    exceImport,
    basicTable,
  },
  props: {
    tip: String,
    importCode: String,
    batchid: {
      type: String,
      default: ""
    },
    filename: String,
    onlyUpload: {
      type: Boolean,
      default: false,
    },
    name: {
      type: String,
      default: "导入",
    },
    type: String,
    result: {
      type: Boolean,
      default: true,
    },
    replace: {
      type: Boolean,
      default: false,
    },
    detailType: {
      type: String,
      default: "",
    },
    size: {
      type: String,
      default: "",
    },
    btnType: {
      type: String,
      default: "default"
    },
    refreshTemp: {
      type: Boolean,
      default: false,
    }
  },
  data() {
    return {
      loading3: false,
      showFooter: false,
      showSlot: true,
      show: true,
      timer: null,
      showRes: false,
      loading: false,
      posting: false,
      finished: false,
      successCount: 0,
      activeName: "total",
      currentItem: {},
      tableParams: {
        status: "",
      },
      tableParams1: {},
      tableParams2: {},
      tableParams3: {},
      columns1: [
        {
          label: "异常类型",
          prop: "exceptType",
        },
        {
          label: "异常字段",
          prop: "fieldAlias",
        },
        {
          label: "描述",
          prop: "exceptDesc",
        },
      ],
      columns2: [
        {
          label: "操作人",
          prop: "creatorName",
        },
        {
          label: "上传时间",
          prop: "scrq",
          width: "180px",
        },
        {
          label: "文件名",
          prop: "fileName",
        },
        {
          label: "状态",
          render(h, row) {
            return (
              <span
                class={
                  row.status == 1
                    ? "txt-highlight"
                    : row.status == 2
                      ? "txt-danger"
                      : ""
                }
              >
                {row.status == 1
                  ? "导入成功"
                  : row.status == 2
                    ? "导入失败"
                    : "待导入"}
                （{row.itemNum}条）
              </span>
            );
          },
        },
        {
          label: "备注",
          prop: "remark",
        },
        {
          label: "操作",
          fixed: "right",
          width: "210px",
          render: (h, row) => {
            return (
              <div>
                <el-button
                  type="text"
                  onClick={() => this.checkResult(row)}
                  size="middle"
                  class="txt-highlight"
                >
                  查看
                </el-button>
                <el-button
                  type="text"
                  onClick={() => this.submit1(row)}
                  size="middle"
                  class={row.status == 0 ? "txt-highlight" : "displayNone"}
                >
                  导入
                </el-button>
                <el-button
                  type="text"
                  onClick={() => this.delRow(row)}
                  size="middle"
                  class={row.status !== 1 ? "txt-highlight" : "displayNone"}
                >
                  删除
                </el-button>
                <el-button
                  type="text"
                  onClick={() => this.download(row)}
                  size="middle"
                  class="txt-highlight"
                >
                  下载
                </el-button>
              </div>
            );
          },
        },
      ],
      fields: [
        {
          label: "数据状态：",
          prop: "status",
          type: "radio",
          options: [
            {
              label: "所有",
              value: "",
            },
            {
              label: "正常数据",
              value: 1,
            },
            {
              label: "异常数据",
              value: 0,
            },
          ],
          change: (val) => {
            this.fecthData();
          },
        },
      ],
      fields3: [
        {
          label: "",
          placeholder: "请选择上传开始日期",
          prop: "uploadTimeAfter",
          type: "date",
          dType: "date",
          format: "yyyy-MM-dd",
          span: 6,
        },
        {
          label: "",
          placeholder: "请选择上传结束日期",
          prop: "uploadTimeBefore",
          type: "date",
          dType: "date",
          format: "yyyy-MM-dd",
          span: 6,
        },
      ],
      fields4: [
        {
          label: "数据状态：",
          prop: "status",
          type: "radio",
          options: [
            {
              label: "所有",
              value: "",
            },
            {
              label: "正常数据",
              value: 1,
            },
            {
              label: "异常数据",
              value: 0,
            },
          ],
          change: (val) => {
            this.fecthData3();
          },
        },
      ],
      editForm: {},
      fields1: [],
      auditForm: {},
      titles: [],
      fields2: [
        {
          label: "",
          prop: "ignoreAbnormal",
          type: "radio",
          options: [
            {
              label: "检查异常后导入",
              value: 1,
            },
            {
              label: "忽略异常直接导入",
              value: 0,
            },
          ],
        },
      ],
      confirmForm: {
        ignoreAbnormal: 1,
      },
    };
  },
  computed: {
    action() {
      return upload(this.importCode);
    },
    data() {
      return {
        importCode: this.importCode,
        businessId: this.batchid,
      };
    },
    columns() {
      return [
        {
          label: "excel行号",
          prop: "rowNum",
          width: 90,
        },
        {
          label: "数据状态",
          render: (h, row) => {
            return (
              <div
                onClick={() => this.abnormal(row)}
                class={row.status == 1 ? "" : "txt-danger cursor-p"}
              >
                {row.status == 1 ? "正常" : "异常"}
              </div>
            );
          },
        },
        ...(this.titles || []).map(v => ({
          label: v.fieldAlias,
          prop: v.fieldName,
          width: 160,
        })),
        {
          label: "操作",
          fixed: "right",
          width: "120px",
          render: (h, row) => {
            if (!this.currentItem.status || this.currentItem.status != 1) {
              return (
                <div>
                  <el-button
                    type="text"
                    onClick={() => this.editAbnormal(row)}
                    size="middle"
                    class="txt-highlight"
                  >
                    修改
                  </el-button>
                  <el-button
                    type="text"
                    onClick={() => this.del(row)}
                    size="middle"
                    class="txt-highlight"
                  >
                    删除
                  </el-button>
                </div>
              );
            }
          },
        },
      ]
    }
  },
  methods: {
    download(item) {
      return download(this.importCode, item.fileName, {
        batchId: item.batchId,
        importCode: this.importCode,
      });
    },
    temDownload() {
      return importTemplate(this.importCode, this.filename);
    },
    tempRefresh() {
      return refresh(this.importCode, this.filename)
    },
    callServer() {
      let req = (query) => {
        return result(this.importCode, query);
      };
      return req;
    },
    callServer2() {
      return (query) => {
        return history(this.importCode, Object.assign({}, query, { businessId: this.batchid }));
      };
    },
    fecthData() {
      this.$refs.basicTable.fecthData();
    },
    fecthData3() {
      this.$refs.basicTable3.fecthData();
    },
    beforeShow(data) {
      if (data.length) {
        let arr = data.map((item) => {
          for (let i = 0; i < item.items.length; i++) {
            item[item.items[i].fieldName] = item.items[i].fieldValue;
          }
          return item;
        });
        return arr;
      }
    },
    async getTitles(importCode) {
      await titles(importCode).then((data) => {
        this.titles = data.data;
        // if (data.data.length) {
        //   for (let da of data.data) {
        //     this.columns.push({
        //       label: da.fieldAlias,
        //       prop: da.fieldName,
        //       width: 160,
        //     });
        //   }
        // }
      });
    },
    getProcess(id, cb) {
      let me = this;
      clearTimeout(me.timer);
      progress(this.importCode, id).then(async (data) => {
        if (data.data.failMessage) {
          this.toast(data.data.failMessage + '，请重新选择文件上传。', "warning");
          this.$refs.exceImport.count = 0;
          this.$refs.exceImport.fileList = [];
          this.$refs.exceImport.showResult = false;
          return false;
        }
        if (data.data.done) {
          await me.getTitles(me.importCode)
          this.showRes = true;
          me.tableParams.batchId = id;
          if (cb) {
            cb();
          }

        } else {
          me.timer = setTimeout(() => me.getProcess(id), 1000);
        }
      });
    },
    submit(ignoreAbnormal) {
      this.posting = true;
      let me = this;
      submit(this.importCode, this.tableParams.batchId, ignoreAbnormal)
        .then((data) => {
          me.toast("导入成功", "success");
          me.$refs.exceImportDialog.close();
          me.$emit("uploaded")
          me.posting = false;
        })
        .catch((err) => {
          this.posting = false;
        });
    },
    submit1(item) {
      this.posting = true;
      submit(this.importCode, item.batchId, false)
        .then((data) => {
          this.successCount = data.data;
          this.finished = true;
          this.posting = false;
          this.$refs.basicTable2.reload()
        })
        .catch((err) => {
          this.posting = false;
        });
    },
    handleClose1() {
      const me = this;
      this.$refs.resultDialog.posting = true;
      submit(this.importCode, this.currentItem.batchId, false)
        .then((data) => {
          this.$refs.resultDialog.close();
          this.$refs.basicTable2.reload()
          me.toast("导入成功", "success");
        })
        .catch((err) => {
          this.$refs.resultDialog.posting = false;
          this.posting = false;
        });
    },
    saveItem1() {
      const me = this;
      submit(
        this.importCode,
        this.tableParams.batchId,
        this.confirmForm.ignoreAbnormal == 1 ? false : true
      )
        .then((data) => {
          this.successCount = data.data;
          this.$refs.confirmDialog.close();
          this.finished = true;
          this.posting = false;

          me.toast("导入成功", "success");
        })
        .catch((err) => {
          this.$refs.confirmDialog.close();
          this.$refs.confirmDialog.posting = false;
          this.posting = false;
        });
    },
    checkHis() {
      this.$refs.hisDialog.dialogVisible = true;
    },
    openExceImportDialog() {
      this.show = true;
      this.$refs.exceImportDialog.dialogVisible = true;
    },
    uploaded(res) {
      if (res.data) {
        this.finished = false;
        this.showRes = false;
        this.getProcess(res.data);
      } else {
        this.toast("导入完毕", "success");
        this.$refs.exceImportDialog.close();
        this.currentItem = {};
        this.$emit("uploaded");
      }
    },
    handleClose() {
      this.$refs.exceImportDialog.close();
      this.showSlot = true;

      this.$emit("uploaded");
    },
    abnormal(item) {
      abnormal(this.importCode, {
        dataId: item.id,
        importCode: this.importCode,
      }).then((data) => {
        this.currentItem = {
          dataId: item.id,
          rowNum: item.rowNum,
          items: item.items,
          yiData: data.data.items,
        };
        for (let i = 0; i < this.currentItem.items.length; i++) {
          for (let j = 0; j < data.data.items.length; j++) {
            if (
              this.currentItem.items[i].fieldName ==
              data.data.items[j].fieldName
            ) {
              this.currentItem.items[i].hasyc = true;
              this.currentItem.items[i].exceptDesc =
                data.data.items[j].exceptDesc;
            }
          }
        }
        this.setForm(this.currentItem);
        this.$refs.abnormalDialog.dialogVisible = true;
      });
    },
    editAbnormal(item) {
      if (item.status == "1") {
        this.currentItem = {
          dataId: item.id,
          rowNum: item.rowNum,
          items: item.items,
          batchId: item.batchId,
        };
        this.setForm(this.currentItem);
        this.$refs.editDialog.dialogVisible = true;
      } else {
        abnormal(this.importCode, {
          dataId: item.id,
          importCode: this.importCode,
        }).then((data) => {
          this.currentItem = {
            dataId: item.id,
            rowNum: item.rowNum,
            items: item.items,
            batchId: item.batchId,
          };
          for (let i = 0; i < this.currentItem.items.length; i++) {
            for (let j = 0; j < data.data.items.length; j++) {
              if (
                this.currentItem.items[i].fieldName ==
                data.data.items[j].fieldName
              ) {
                this.currentItem.items[i].hasyc = true;
                this.currentItem.items[i].exceptDesc =
                  data.data.items[j].exceptDesc;
              }
            }
          }
          this.setForm(this.currentItem);
          this.$refs.editDialog.dialogVisible = true;
        });
      }
    },
    setForm(data) {
      this.editForm = {
        dataId: data.dataId,
        recheck: true,
        auditDatas: [],
      };
      this.auditForm = {
        dataId: data.dataId,
        recheck: true,
        auditDatas: [],
      };
      this.fields1 = [];
      for (let i = 0; i < data.items.length; i++) {
        let label = data.items[i].fieldAlias;
        this.editForm.auditDatas.push({
          fieldAlias: data.items[i].fieldAlias,
          fieldName: data.items[i].fieldName,
          fieldValue: data.items[i].fieldValue,
        });
        this.$set(
          this.auditForm,
          data.items[i].fieldName,
          data.items[i].fieldValue || ""
        );
        this.fields1.push({
          label: data.items[i].hasyc ? `(异常)${label}：` : `${label}：`,
          placeholder: `请输入${label}`,
          prop: data.items[i].fieldName,
          type: "text",
          span: 12,
          class: {
            "txt-danger": data.items[i].hasyc ? "#ff4949" : "",
          },
          tip: data.items[i].exceptDesc,
          // rule: [
          //   {
          //     required: true,
          //     message: `请输入${label}`,
          //     trigger: "blur",
          //   },
          // ],
        });
      }
    },
    saveItem() {
      const me = this;
      this.$refs.editForm.validate().then((valid) => {
        if (valid) {
          this.$refs.editDialog.posting = true;
          for (let i = 0; i < this.editForm.auditDatas.length; i++) {
            this.editForm.auditDatas[i].fieldValue = this.auditForm[
              this.editForm.auditDatas[i].fieldName
            ];
          }
          this.editForm.batchId = this.currentItem.batchId;
          aduit(this.importCode, this.editForm)
            .then(() => {
              this.$refs.editDialog.close();
              me.toast("修改成功", "success");
              if (me.$refs.basicTable3) {
                me.$refs.basicTable3.fecthData();
              } else {
                me.fecthData();
              }
            })
            .catch((err) => {
              this.$refs.editDialog.posting = false;
            });
        }
      });
    },
    del(item) {
      let me = this;
      this.alert("删除该条数据？", "确认要进行删除吗？", {
        type: "warning",
        request() {
          return remove(me.importCode, {
            batchId: item.batchId,
            dataIds: [item.id],
            recheck: false,
          });
        },
        success() {
          me.toast("删除成功", "success");
          if (me.$refs.basicTable3) {
            me.$refs.basicTable3.fecthData();
          } else {
            me.fecthData();
          }
        },
      });
    },
    delRow(item) {
      let me = this;
      this.alert("删除该条上传记录？", "确认要进行删除吗？", {
        type: "warning",
        request() {
          return hisRemove(me.importCode, {
            batchId: item.batchId,
            importCode: me.importCode,
          });
        },
        success() {
          me.toast("删除成功", "success");
          me.$refs.basicTable2.fecthData();
          me.$emit("uploaded");
        },
      });
    },
    async checkResult(item) {
      this.currentItem = item;
      await this.getTitles(item.importCode || this.importCode)
      this.$refs.resultDialog.dialogVisible = true;
      //this.loading3 = true;
      this.tableParams3.batchId = item.batchId;
      this.showRes = true;
      /*  this.getProcess(item.batchId, () => {
         this.loading3 = false;
       }); */
    },
  },
};
</script>